<template>
  <canvas id="wrap" class="music_play_bg">
    {{bgUrl}}
  </canvas>
</template>

<script>
export default {
  name: 'canvas',
  props: ['bgUrl'],
  data(){
    return {
      wrap: {},
      cxt: {}
    }
  },
  methods: {
    setCanvas(){
      let cxt = this.cxt
      cxt.clearRect(0, 0, this.wrap.width, this.wrap.height)
      // 画线条
      for (var i = 0; i < 360; i++) {
        var value = 8
        cxt.beginPath()
        cxt.lineWidth = 2
        cxt.moveTo(300, 300)
        // R * cos (PI/180*一次旋转的角度数) ,-R * sin (PI/180*一次旋转的角度数)
        cxt.lineTo(Math.cos((i * 1) / 180 * Math.PI) * (200 + value) + 300, (-Math.sin((i * 1) / 180 * Math.PI) * (200 + value) + 300))
        cxt.stroke()
      }
      // 画一个小圆，将线条覆盖
      cxt.beginPath()
      cxt.lineWidth = 1
      cxt.arc(300, 300, 200, 0, 2 * Math.PI, false)
      cxt.fillStyle = '#fff'
      cxt.stroke()
      cxt.fill()
    }
  },
  mounted(){
    this.wrap = document.querySelector('#wrap')
    this.cxt = this.wrap.getContext('2d')
    this.setCanvas()
  }
}
</script>

<style scoped>
.music_play_bg{
  color: orange;
  width: 300px;
  height: 300px;
  position: relative;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}
</style>
